<cd-modal [modalRef]="activeModal">
  <ng-container class="modal-title">
    <ng-container i18n>Upgrade Cluster</ng-container>&nbsp;
  </ng-container>

  <ng-container class="modal-content">
    <form name="upgradeForm"
          class="form"
          #formDir="ngForm"
          [formGroup]="upgradeForm"
          novalidate>
      <div class="modal-body">
        <cd-alert-panel type="warning"
                        spacingClass="mb-3"
                        *ngIf="showImageField"
                        i18n>Make sure to put the correct image. Passing an incorrect image can lead the cluster into an undesired state.</cd-alert-panel>
        <div *ngIf="versions"
             class="form-group row">
          <label class="cd-col-form-label"
                 [ngClass]="{'required': !showImageField}"
                 for="availableVersions"
                 i18n>New Version</label>
          <div class="cd-col-form-input">
            <select id="availableVersions"
                    name="availableVersions"
                    class="form-select"
                    formControlName="availableVersions">
              <option *ngIf="versions === null"
                      ngValue="null"
                      i18n>Loading...</option>
              <option *ngIf="versions !== null && versions.length === 0"
                      [ngValue]="null"
                      i18n>-- No version available --</option>
              <option *ngIf="versions !== null && versions.length > 0"
                      [ngValue]="null"
                      i18n>-- Select a version --</option>
              <option *ngFor="let version of versions"
                      [value]="version">{{ version }}</option>
            </select>
            <span class="invalid-feedback"
                  *ngIf="upgradeForm.showError('availableVersions', formDir, 'required')"
                  i18n>This field is required!</span>
          </div>
        </div>

        <div *ngIf="versions"
             class="form-group row">
          <div class="cd-col-form-offset">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     id="useImage"
                     name="useImage"
                     formControlName="useImage"
                     (click)="useImage()">
              <label class="custom-control-label"
                     for="useImage"
                     i18n>Use image</label>
            </div>
          </div>
        </div>

        <!-- Custom image name input-->
        <div class="form-group row"
             *ngIf="showImageField || !versions">
          <label class="cd-col-form-label required"
                 for="customImageName"
                 i18n>Image</label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   id="customImageName"
                   name="customImageName"
                   formControlName="customImageName">
            <span class="invalid-feedback"
                  *ngIf="upgradeForm.showError('customImageName', formDir, 'required')"
                  i18n>This field is required!</span>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="startUpgrade()"
                              [form]="upgradeForm"
                              [submitText]="actionLabels.START_UPGRADE"></cd-form-button-panel>
      </div>
    </form>
  </ng-container>
</cd-modal>
